@import './variables';
@import './base';

.ql-editor{
  height:400px;
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

#avue-view{height:calc(100% - 40px) !important;}

.avue-tags{
  margin-bottom:0px;
}


.upload-tip{
  margin-top:10px;
  li{
    font-size:12px;color:$red;line-height:21px;
  }
}

//main-container全局样式
.page-main{
  // margin: 24px 24px 24px 24px;
  height:100%;
  background-color: white;
  border-radius: 2px;
  &.avue-view{padding:0;width:auto;}
  .header{
    border-bottom: 1px solid whitesmoke;
    display: flex;
    justify-content: space-between;
    padding:10px 0;
    .title{
      font-size: 18px;
      color: $titleColor;
      font-weight:bold;
      line-height: 40px;
      margin-left: 20px;
      margin-bottom: 0;
    }
    .tool{
      margin-right: 20px;
      line-height: 40px;
    }
  }
}
@media screen and (max-width: 786px) {
  .page-main{
    .header{
      display:block;
      .tool{margin:0 20px;}
    }
  }
}
.form-search{
  padding-bottom:10px;
  .el-form--inline .el-form-item{
    margin-bottom:15px;margin-right:0px;height:32px;
  }
  .el-form--inline{
    .el-form-item{display:flex;}
    .el-form-item__content{display:block;flex:1;}
    .el-cascader{display:block;}
    .el-select,.el-date-editor--daterange.el-input__inner{width:100%;}
    
  }
  .search-cascader{
    .el-input .el-input__inner{height:32px!important;}
  }
  // .el-button--default{
  //   border-color:$mainColor;color:$mainColor;
  //   &:hover{
  //       border-color:$mainColor;
  //   }
  // }
}
.main-container{
  background:#f0f2f5;
}
.app-container {
  // padding: 24px;
  // margin: 24px;
  border-radius: 2px;
  background:#fff;
  position:relative;
  &+.app-container{
    margin-top:20px;
  }
  .avue-crud__menu{
    position:absolute;
    top:-46px;
    right:30px;
    width: auto;
    // display:none !important;
    .avue-crud__right{
      display:none;
    }
  }
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
}


// .sub-navbar {
//   height: 50px;
//   line-height: 50px;
//   position: relative;
//   width: 100%;
//   text-align: right;
//   padding-right: 20px;
//   transition: 600ms ease position;
//   background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

//   .subtitle {
//     font-size: 20px;
//     color: #fff;
//   }

//   &.draft {
//     background: #d0d0d0;
//   }

//   &.deleted {
//     background: #d0d0d0;
//   }
// }

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}


.add-edit-personnel{
  .component-upload-image{
    &>div{margin-left:50px;}
    .el-upload--picture-card{
      height:210px;
      width:210px;
      line-height:210px;
    }
  }
}

.vue-treeselect{
  .vue-treeselect__control{
    height:34px;line-height:34px;
  }
  .vue-treeselect__input{

  }
}


.form-search{
  .vue-treeselect{
    margin: 2px 0;
    .vue-treeselect__control{
      height:30px;line-height:30px;
    }

  }
}


.fly-container{
  .hd{
    display:flex;justify-content: space-between; align-items: center;padding-bottom:15px;
    .title{flex: 1;text-align:left;
      h3{margin:0;}
    }
    .more{text-align:right;}
  }
}

.el-link{
  .el-icon-edit-outline{
    position:relative;
    display:inline-block;width:16px;height:16px;
    // background:url('../assets/img/icon-edit.png') no-repeat;
    background:url('../assets/img/icon-edit.svg') no-repeat;
    &::before{
      content: '';
    }
  }
}

.row-border{
  border:1px solid $lineColor;border-radius:2px;
  .el-col{padding:15px;margin-bottom:0;
    position:relative;
    &::after{
      content: '';position: absolute;top:0;width:1px;height:100%;background:$lineColor;
    } 
    &:first-child{
      &::after{
        right:0;
      }
    }
    &+.el-col{
      &::after{
        left:-1px;
      }
    }     
  }
}

.page-home{
  padding:24px;
  .welcome{
    h3{
      font-size:32px;color:#ccc;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin:0;
    }
  }
  &-index{
    padding:0;position:relative;
    .search-bar{
      position:absolute;top:10px;left:10px;z-index:100;
      .el-form-item--small.el-form-item{
        margin-bottom:10px;
      }
    }
    .legends-_IeRm{left:inherit;right:220px;}
    .categoriesContainer-QSCZ6{margin-right:-10px;}
    .btn-control{
      justify-content:flex-start;
      .el-date-editor{
        width:182px;
        .el-input__inner{border-radius:0px;border-left:none;border-right:none;}
      }
      .btn-left{
        border-radius:4px 0 0 4px;
      }
      .btn-right{
        border-radius:0 4px 4px 0;
      }
      .btn-play{
        padding:0px;font-size:32px;border:none;background:none;
        i{background:#fff;border-radius:50%;}
      }
    }
    .form-live-weather{
      
    }
    .form-pollutant-source{
      .el-select{width:240px;}
      .form-industries{
        display:flex;align-items:center;
        .el-checkbox{
          background:#fff;padding:10px;border-radius:4px 0 0 4px;line-height:18px;box-sizing:border-box;width:50px;height:54px;border:1px solid #dcdfe6;border-right:none;float:left;text-align:center;
          .el-checkbox__input{display:block;}
          .el-checkbox__label{padding:0;}
        }
        .el-select{
          width:190px;
          .el-input__inner{
            border-radius:0 4px 4px 0;height:54px;
          }
        }
      }
      .btn-search{
        .el-input__inner{width:194px;}
        .el-input-group__append{
          background:$mainColor;padding:0px;color:#fff;border-color:$mainColor;
          .el-button{
            margin:0 !important;
          }
        }
      }
    }

  }
  
}


.page-login{
  &-index{
    height:100%;background:#F6F7FC;position:relative;
    .login-form{
      width:360px;background:#fff;padding:24px;border-radius:16px;margin:0 auto;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
      box-shadow: 0px 2px 8px 1px rgba(206, 213, 243, 0.33);
      .btn-submit{width:100%;display:block;}
    }
  }
}

.page-system{
  .el-dialog__wrapper{
    .el-dialog__footer{
      .el-button--primary{float:right;margin-left:10px;}
      .el-button{
        i{display:none;}
      }
    }
  }
}

// 角色新增弹窗
.el-dialog__body{
  .avue-form__menu{
    .el-form-item--feedback{
      .el-button{
        i{display:none;}
      }
      .el-button--primary{float:right;margin-left:10px;}
    }
  }
}


.dialog-iframe{
  .el-dialog__body{padding:0;}
}

.base-info{
  .el-col{margin-bottom:15px;}
}



.find-password{
  // .el-dialog{border-radius:18px;}
  .find-type{
      width:280px;margin:0 auto;
      div{
          width: 280px;
          height: 66px;
          line-height:66px;
          padding: 0 18px;
          box-sizing: border-box;
          background: linear-gradient(90deg, #F8FBFF 0%, #E9F1FC 100%);
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: 1px solid $mainColor;
          color:$mainColor;
          font-size: 14px;
          margin-bottom:32px;
          cursor: pointer;
          position:relative;
          &:after{
              content: '';position:absolute;top:50%;right:18px;transform: translateY(-50%);height:16px;width:16px;background:url('../assets/img/icon-arrow-right.png') no-repeat;background-size:16px 16px;
          }
          img{float:left;margin:21px 10px 0 0;}
      }
  }
  .find-form{
      width:280px;margin:0 auto;padding: 30px 0;
      .placeholder{font-size:12px;color:#999;}
      .el-input__inner{border-top:none;border-left:none;border-right:none;border-radius:0;padding-left:0;}
      .btn-group{
          height:auto;margin-top:30px;
          .el-button{display:block;width:100%;height:40px;}
      }
  }
  .el-input-group--append{
      background:none;position:relative;
      //  .el-input__inner{border-right:none;}
      .el-input__inner{width:100%;}
      .el-input-group__append{background:none;display:inline-block;position:absolute;top:0;right:0;width:100px;height:32px;border:none;line-height:32px;text-align:center;padding:0;
        .el-button{color:$blue;padding:0;
          &.is-disabled{color:#999;}
        }
      }
    } 
    .drag-verify{
      margin-bottom:15px;border-radius:4px !important;overflow:hidden;
      .dv_handler{
        height:32px !important;width:32px !important;box-sizing: border-box;border-radius:4px !important;
      }
    }
}


.el-table{
  .el-tag{
    &--success{background:$greenLight;border-color:$greenLight2;color:$green;}
    &--danger{background:$redLight;border-color:$redLight2;color:$red;}
  }
}


.el-table th.el-table__cell{
  .cell{
    font-weight:bold;
  }  
}

.layout-lr{
  .flex-wrap{
    @extend .flex-block;align-items: stretch;height:100%;
    .content-wrap{
      flex:1;overflow:hidden;text-align:center;height:100%;
      .el-scrollbar__view{padding-right:20px;}
    }
  }
  .el-scrollbar{
    overflow-y: auto;
  }
  .el-scrollbar__wrap{overflow-x: hidden;}
  .form-search{  
     width:400px;margin-left:0px;border-left:1px solid #dee2e6;
    .el-form .el-form-item{
      height:auto;
      .el-button{margin: 0 8px 8px 0;}
    }
  }
  .collapse-search{
    position:absolute;z-index:10;right:0;top:50%;transform:translateY(-50%);padding:16px 2px;background:$mainColor;color:#fff;border-radius:4px 0 0 4px;cursor:pointer;
  }

}

.page-air-quality-calendar{
  .el-calendar__button-group{display:none;}
  .el-calendar-table{
    .el-calendar-day{
      padding:0;height:auto;
      p{text-align:center;padding:8px;margin:0;}
      .item{
        &-0{text-indent:-100000px;}
        &-1{background:rgb(0, 228, 0);}
        &-2{background:rgb(255, 255, 0);}
        &-3{background:rgb(255, 126, 0);}
        &-4{background:rgb(255, 0, 0);}
        &-5{background:rgb(153, 0, 76);}
        &-6{background:rgb(126, 0, 35);}
      }
    }
  }
  .list-type{
    font-size:14px;margin-left:10px;text-align:left;
    .dot{
      position:relative;padding:0 10px 0 20px;display:inline-block;
      &:before{
        content: '';position:absolute;left:8px;top:5px;width:10px;height:10px;border:1px solid #000;background:#fff;border-radius:50%;
      }
      &-1{ &:before{background:rgb(0, 228, 0)}}
      &-2{ &:before{background:rgb(255, 255, 0);}}
      &-3{ &:before{background:rgb(255, 126, 0);}}
      &-4{ &:before{background:rgb(255, 0, 0);}}
      &-5{ &:before{background:rgb(153, 0, 76);}}
      &-6{ &:before{background:rgb(126, 0, 35);}}
    }
    .total{font-size:16px;}
  }
    .flex-block{align-items: flex-start;}
    .list-year{
      flex:1;width:100%;
    }
    .legend-box{
      width:120px;margin-left:30px;
      h2{height:30px;text-align:center;}
      .item{
        height:50px;display:flex;
        .name{width:40px;text-align:right;line-height:50px;}
        .column{width:10px;height:50px;border:1px solid #000;margin:0 10px;
          &+.column{border-top:none;}
          &-1{background:rgb(0, 228, 0);}
          &-2{background:rgb(255, 255, 0);}
          &-3{background:rgb(255, 126, 0);}
          &-4{background:rgb(255, 0, 0);}
          &-5{background:rgb(153, 0, 76);}
          &-6{background:rgb(126, 0, 35);}
        }
        .value{
          margin-top:-10px;
        }
      }
      .list-type{
        margin-top:30px;font-size:16px;
        li{
          margin-top:10px;
          &.dot{display:block;}
        }
      }
    }
}

.page-air-quality-ranking{
  .list{min-height:400px;}
  .el-table th.el-table__cell{
    position: relative;
    &>.cell{
      padding-bottom:50px;position: static;display:flex;align-items:center;line-height:inherit;justify-content:center;
      .td-top{
        position: absolute;height:44px;width:100%;line-height:44px;bottom:0;left:0;padding:0 10px;background:#ffe58f;font-weight:normal;
      }
    }
  }
  .light{
    background:#ffe58f;
    td.el-table__cell{
      background:#ffe58f !important;
    }
  }
  .tag{
    display:inline-block;padding:4px 8px;width:60px;text-align:center;box-sizing:border-box;line-height:14px;border-radius: 2px;
  }
}

.page-pollution-source-emission{
  .list{
    position:relative;min-height: 500px;
  }
  .select-industries{
    .el-input__inner{height:auto;min-height:60px;}
  }
  .form-class{
    .dot{
      display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #000;float:left;margin:3px 5px 0 0;
    }
  }
  .btn-search{
    .el-input-group__append{
      background:$mainColor;padding:0px;color:#fff;
      .el-button{
        margin:0 !important;
      }
    }
  }
  .el-drawer__wrapper{
    position: absolute;left:inherit;right:0px;top:0px;height:100%;width:740px;
    .el-drawer{
      border-radius:4px;overflow:hidden;
    }
    .el-drawer__header{
      background:#f5f5f5;padding:15px;margin-bottom:0px;
    }
    // .el-drawer__body{
    //   padding:15px;
    // } 
    .drawer-body{
      width:740px;height:100%;box-sizing:border-box;
    }  
  }
  .station-detail{
    .list{
      height:calc(100% - 60px);
    }
  }
  .company-detail{
    .drawer-body{
      height:calc(100% - 60px);
      .el-scrollbar{
        overflow-y: auto;
      }
      .el-scrollbar__wrap{overflow-x: hidden;}
    } 
    .el-form{
      padding:15px;
      .el-form-item--small{
        &.el-form-item{margin-bottom:8px;}
        .el-form-item__label{
          display:block;float:inherit;text-align:left;
        }
        .el-form-item__content{
          min-height:34px;
        }
      }
      .vue-treeselect__control{
        border-radius:4px;border:1px solid #dcdfe6;
      }
      .vue-treeselect--searchable .vue-treeselect__input-container{
        height:32px;
      }
      .vue-treeselect--has-value .vue-treeselect__input{
        height:32px;line-height:32px;
      }
      
    }   
  }

}

.page-create-pollution-events{
  .search-block{
    display:flex;flex-flow:column;justify-content:space-between;height:100%;
  }
  .map-tips{
    position:absolute;right:10px;bottom:10px;z-index:100;border-radius:4px;overflow:hidden;
    .el-collapse-item__header{
      height:36px;line-height:36px;
      padding-left: 15px;
      background: #f5f5f5;
    }
    .el-collapse-item__content{
      padding:10px 15px;position:relative;
    }
    .top{}
    .bar{
      height:100px;width:20px;border-radius:2px;margin:0 auto;
      background:linear-gradient(#a24f5e,#bd8832,#a5c266,#a4ddab,#98f5e6,#bfffff,#adf6ff,#8be0fe,#61aefd,#436df4,#4f3ed5,#42019e)
    }
    .bottom{

    }
  }
}


.page-pollution-situation{
  .flex-block{
    align-items: stretch;
  }
  .list-img{
    .el-row,.el-col{height:100%;}
    .img-block{display:flex;justify-content:center;align-items:center;height:100%;}
  }  
}

.page-city-forecast{
  .form-search{
    .el-button{width:100%;margin-right:0;}
  }
}

.page-live-weather{
  .form-search{
    width:360px;
  }
  .select-date{
    .el-button{margin:0!important;padding-left:5px;padding-right:5px;}
  }
  .collapse-type{
    position:absolute;bottom:10px;right:10px;width:140px;z-index:100;border-radius:4px;overflow:hidden;
    .el-collapse-item__content{
      padding:10px 15px;
      .item{padding:2px 0;
        img{width:14px;float:left;margin-top:4px;}
        i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #000;}
        span{display:inline-block;margin-left:6px;}
      }
    }
    .el-collapse-item__header{
      padding-left:15px;background:#f5f5f5;
    }
  }
  .el-drawer__wrapper{
    position: absolute;left:10px;bottom:10px;width:calc(100% - 170px);height:375px;top:inherit;overflow:unset;
    .el-drawer{
      border-radius:4px;overflow:hidden;
    }
    .el-drawer__header{
      background:#f5f5f5;padding:15px;margin-bottom:0px;text-align:left;
    }
    .el-drawer__body{
      padding:15px;
    }   
  }
  
  
}
.map-popup-container{
  padding:0;margin:-10px;overflow:hidden;border-radius:4px;overflow:hidden;
  .popup-title{background:#f5f5f5;padding:15px;font-weight:bold;font-size:14px;text-align:left;}
  .popup-content{
    text-align:left;
    .popup-table{width:100%;}
    tr:nth-child(2n){background:#f9f9f9;}
    td{padding:3px 15px;}
  }
}
.mapboxgl-popup{
  max-width:360px!important;
}
.marker-selected {
  background-position: 50%;
  background-size: contain;
  width: 36px!important;
  height: 36px!important;
  display: flex;
  align-items: center;
  justify-content: center;
  p{
    background-color: rgba(250,0,0,.2);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: marker-selected 1.5s infinite;
    box-shadow: 0 0 2px red;
  }
}
@keyframes marker-selected{10%{transform:scale(1.2)}20%{transform:scale(1.5)}40%{transform:scale(2)}60%{transform:scale(2.3)}80%{transform:scale(2.6)}to{transform:scale(3)}}

.page-industry-info-manage{
  .app-container{
    min-height:auto!important;
  }
  .btn-search{
    .el-input-group__append{
      background:$mainColor;padding:0px;color:#fff;
      .el-button{
        margin:0 !important;
      }
    }
  }
  .el-table th.el-table__cell{
    .flex-block{
      cursor:pointer;
      .title{width:90px;line-height:18px;}
      i{font-size:18px;}
    }
  }
  .select-industries{
    .el-input__inner{height:auto;min-height:60px;}
  }
  .el-drawer__wrapper{
    
    .el-drawer{
      overflow:hidden;
    }
    .el-drawer__header{
      background:#f5f5f5;padding:15px;margin-bottom:0px;
    }
    .drawer-body{
      width:740px;height:100%;box-sizing:border-box;
    }  
  }
  .station-detail{
    .list{
      height:calc(100% - 60px);
    }
  }
  .company-detail{
    .drawer-body{
      height:calc(100% - 60px);
      .el-scrollbar{
        overflow-y: auto;
      }
      .el-scrollbar__wrap{overflow-x: hidden;}
    } 
    .el-form{
      padding:15px 24px;
      .el-form-item--small{
        &.el-form-item{margin-bottom:8px;}
        .el-form-item__label{
          display:block;float:inherit;text-align:left;
        }
        .el-form-item__content{
          min-height:34px;
        }
      }
      .vue-treeselect__control{
        border-radius:4px;border:1px solid #dcdfe6;
      }
      .vue-treeselect--searchable .vue-treeselect__input-container{
        height:32px;
      }
      .vue-treeselect--has-value .vue-treeselect__input{
        height:32px;line-height:32px;
      }
      .form-view{
        .el-form-item__content{position:relative;
          &:after{
            content: '';height:100%;width:100%;position:absolute;z-index:2;background:rgba(0,0,0,0);top:0;left:0;
          }
        }
      }
      
    }   
  }

}

.page-user-manage{
  .drawer-form{
    .el-icon-view{
      position:relative;
      span{
        position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);
      }
    }
    .drawer-body{
      width:560px;
    }
  }
}
.add-menu{
  .el-dropdown-menu__item{
    // padding: 0 !important;
    .btn-add{
      margin:0 -15px;padding:0 15px;
    }
    
  }
}


.drawer-date-range{
  .el-time-spinner__wrapper{
    width:100% !important;
  }
  .el-scrollbar:nth-of-type(2){
    display:none !important;
  }
  .el-picker-panel__footer{
    .el-button--text{display:none;}
  }
}


.mapboxgl-map{
  .mapboxgl-control-container{display:none;}
  .mapboxgl-ctrl-attrib{
    position:absolute;bottom:0;right:0;background:rgba(255,255,255,.5);padding:0 5px;
  }
}

.page-lionbay{
  .content-wrap{position: relative;
    &.crosshair{
      cursor: crosshair;
    }
  }
  h3{
    background:#e3effc;
    padding:0.5rem 1rem;
    margin: 0;
    margin-bottom:1rem;
    text-align:center;
    border-bottom:1px solid #dee2e6;
    font-size:14px;
  }
  .el-form{
    padding:0.5rem 3rem;
    .el-button--primary{
      background:#1890ff;
      border-color:#1890ff;
    }
  }
  .tips{
    position:absolute;right:20px;bottom:20px;width:300px;padding:8px;border-radius:4px;
    background:rgba(255, 255, 255, 0.7);
    .hd{
      font-size:14px;font-weight:bold;text-align: left;
    }
    .bd{
      padding:10px 0 5px 0;
    }
    .ft{
      display:flex;justify-content: space-between;font-size:12px;
    }
  }
}